<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue-bing</title>


</head>
<body>
<!--3.v-bind 作用: 用来给页面中标签元素绑定相应的属性 简化写法  v-bin:属性名 =====> :属性名-->
<div id="app" align="20">
    <img :width="width" :title="bingTitle1" v-bind:src="bingSrc">
    <input type="button" value="改变图片" @click="changeSrc()">
    <input type="button" value="改变图片标题" @click="bingTitle()">
    <input type="button" value="改变图片宽度" @click="bingWidth()">
</div>


<!--在head或body标签内部，可以通过script标签引入外部的JS文件,这里引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            width: 400,
            bingTitle1: "清纯靓丽的图片",
            bingSrc: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599649758852&di=47c647a84e8dbb12733c0335ff70ed9a&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2F6%2F7d%2Fa3a91464250.jpg",
            cont: 0,
            array: ["https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599650691910&di=ef6842292b0c9438562ff407b31830b5&imgtype=0&src=http%3A%2F%2Fwww.56love.cn%2Fd%2Ffile%2F74923704ea147e730f70d16ee8138d9c.jpg",
                "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1039785034,697772401&fm=26&gp=0.jpg",
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599649758856&di=007fdbe2372214ce459aa876c095ff9a&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2F3%2F4f%2Fdb231469688.jpg",
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599649758854&di=626a0d600b46cbcf5bfa78de0f8dc4cf&imgtype=0&src=http%3A%2F%2Fpic.feizl.com%2Fupload%2Fallimg%2F170614%2F1505343257-1.jpg",
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599649758871&di=5d46cd8d010135213d6799a6cb47536a&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2017-12-06%2F5a278d46b8400.jpg",
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599649127072&di=42634637e688c128e1b401a588b66aa1&imgtype=0&src=http%3A%2F%2F00.minipic.eastday.com%2F20170222%2F20170222103823_3b20cb5fbab96e197100c7bf2977c37b_5.jpeg",
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599660033351&di=f215449b4aeeafd9e72c5e240822e2f5&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2Fc%2Fcd%2F81971625378.jpg",
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599659870417&di=9a1918a065c4c9e809f91f8767b764b0&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2F3%2F5e%2Ffc831563767.jpg",
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599659925700&di=065f7de3f34ef0e67814c6be8cf6d12b&imgtype=0&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3029870724%2C794847224%26fm%3D214%26gp%3D0.jpg",
            ]
        },
        methods: {
            bingWidth() {
                this.width = 500;
            },
            bingTitle() {
                this.bingTitle1 = "火辣热情的图片";
            },
            changeSrc() {
                //console(this.cont);
                if (this.cont == 0) {
                    this.bingSrc = this.array[0];
                } else if (this.cont == 1) {
                    this.bingSrc = this.array[1];
                } else if (this.cont == 2) {
                    this.bingSrc = this.array[2];
                } else if (this.cont == 3) {
                    this.bingSrc = this.array[3];
                } else if (this.cont == 4) {
                    this.bingSrc = this.array[4];
                } else if (this.cont == 5) {
                    this.bingSrc = this.array[5];
                } else if (this.cont == 6) {
                    this.bingSrc = this.array[6];
                } else if (this.cont == 7) {
                    this.bingSrc = this.array[7];
                } else if (this.cont == 8) {
                    this.bingSrc = this.array[8];
                }
                this.cont++;
                if (this.cont == 9) {
                    this.cont = 0;
                }
                console.log(this.cont);

            }
        }
    })
</script>
</body>
</html>